@charset "utf-8";
@import 'reset';
@mixin Invalid{
            width: 33.5%;
            height: 2px;
            background: #d9d9d9;
            position: relative;
            img {
                margin-top: -33.5px;
            }
            .step_name{
                font-size: 16px;
                position: absolute;
                left: 65px;
                top:6px;
                color: #444f58;
            }
            .step_number {
                position: absolute;
                top: -25px;
                left: 65px;
            }
        }
 @mixin btn{
               width: 57%;
               height: 102px;
               border-radius: 5px;
               margin: 60px auto 0;
               border: 1px solid #b6413d;
               line-height: 102px;
               text-align: center;
               font-size: 20px;
           }
.web {
    width: 100%;
}

.content {
    width: 73%;
    margin: 0 auto;
}

//nav
.oder_nav>ul>li {
    float: left;
    padding: 24px 5px 23px 0;
    ;
}

.oder_nav>ul>li>a {
    color: #686f76;
}

.oder_nav>ul>li>a>span {
    color: #99999a;
}

//内容
.container {
    width: 100%;
    border-top: 4px solid #eb413d;
    .step {
        width: 80%;
        padding-top: 85px;
        padding-left: 100px;
        margin-left: 6%;
        height: 196px;
        //      background: yellow;
        .active {
            @include Invalid;
            background: #EB413D;
            .step_number {
                color: #EB413D;
            }
            p {
                width: 40%;
                font-size: 14px;
                text-align: center;
                margin-left: -10px;
                color: #99999a;
            }
        }
        .Invalid {
             @include Invalid;
             >.step_name{
                 color: #878787;
             }
             >.step_number{
                 color: #878787;
             }
        }
        .Invalid1 {
            @include Invalid;
             >.step_name{
                 color: #878787;
             }
             >.step_number{
                 color: #878787;
             }
        }
    }
    .conter{
       width: 100%;
       border: 1px solid #e7e7e7; 
//     height: 600px;
       margin-bottom: 380px;
       .shadow{
        width: 100%;
        height: 3px;
        background: #f8f8f8;   
       }
       .con_left{
           width: 42.2%;
           border-right: 1px solid #E7E7E7;
           .wares_ifm{
               padding:40px 37px 74px 41px;
               p{
                   font-size: 18px;
                   line-height:19px;
                   vertical-align: middle;
               
                   img{
                        width: 20px;
                        height: 20px;
                        overflow: hidden;
                        vertical-align: middle;
                        margin-left: 15px;
                   }
               }
               
               .dress{
                   width: 100%;
                   margin-top:27px;
                   margin-bottom: 23px;
                   .wares_img{
                       width:39%;
                       height: 120px;
                       border: 1px solid #e7e7e7;
                       text-align: center;
                       line-height: 120px;
                       overflow: hidden;
                       img{
//                         width: 74px;
//                         height: 99px;
                           overflow: hidden;
                           vertical-align: middle;
                       }
                   }
                   p{
                       width: 58.9%;
                       color: #444f58;
                       font-size: 12px;
                       padding-top: 5px;
                       padding-left:19px ;
                   }
                   span{
                       display: inline-block;
                       font-size: 13px;
                       margin-left: 20px;
                       margin-top: 35px;
                       color: #444f58;
                   }
               }
           }
           .price{
            
               border-top:1px dotted #c9c8c8;
               border-bottom: 1px dotted #c9c8c8;
                p{
                    font-size: 12px;
                    letter-spacing: 6px;
                    line-height: 12px;
                    color: #878787;
                    padding-top: 15px;
                    padding-left: 10px;
                    span{
                        color:#444f58;
                        letter-spacing: 0;
                    }
                    .X1{
                       padding-left: 6px;
                    }
                }
                >span{
                    display: inline-block;
                    line-height: 17px;
                    padding-left: 10px;
                    padding-top: 15px;
                    padding-bottom: 15px;
                    img{
                        vertical-align: top;
                        padding-left: 10px;
                        cursor: pointer;
                    }
                }
                
           }
           .order_ifm{
               padding-left: 10px;
               div{
                   font-size: 18px;
                   padding-top: 20px;
               }
               p{
                   font-size: 12px;
                   color: #878787;
                   padding-top: 18px;
                   span{
                       color: #444f58;
                   }
               }
           }
       }
       .con_right{
           width: 57.8%;
           .btn{
               width: 57%;
               height: 102px;
               border-radius: 5px;
               margin: 60px auto 0;
               border: 1px solid #b6413d;
               line-height: 102px;
               text-align: center;
               font-size: 20px;
               position: relative;
               overflow: hidden;
//             background: #EBEBEB;
               
               .mask_left{
                   position: absolute;
                   width: 50%;
                   height: 99%;
                   top:0.5%;
                   left: 0;
                   border-radius:5px 0 0 5px ;
                   background: #FFFFFF;
                   overflow: hidden;
                   transition:all .2s;
                   transform: translateX(0);
                   span{
                       display: block;
                       transform: translateX(50%);
                   }
               }
               .mask_right{
                   position: absolute;
                   width: 50%;
                   height: 99%;
                   top:0.5%;
                   right: 0;
                   border-radius:0 5px 5px 0 ;
                   background: #FFFFFF;
                   overflow: hidden;
                   transition:all .2s;
                   transform: translateX(0);
                   
                   span{
                       display: block;
                       transform: translateX(-50%);
                   }
               }
                
           }
           .btn:hover .mask_left{
               transform: translateX(-101%);
           }
           .btn:hover .mask_right{
               transform: translateX(101%);
           }
           .btn_t{
                width: 57%;
               height: 102px;
               border-radius: 5px;
               margin: 60px auto 0;
               border: 1px solid #b6413d;
               line-height: 102px;
               text-align: center;
               font-size: 20px;
               position: relative;
               overflow: hidden; 
               .mask_left{
                   position: absolute;
                   width: 50%;
                   height: 99%;
                   top:0.5%;
                   left: 0;
                   border-radius:5px 0 0 5px ;
                   background: #FFFFFF;
                   overflow: hidden;
                   transition:all .2s;
                   transform: translateX(0);
                   span{
                       display: block;
                       transform: translateX(50%);
                   }
               }
               .mask_right{
                   position: absolute;
                   width: 50%;
                   height: 99%;
                   top:0.5%;
                   right: 0;
                   border-radius:0 5px 5px 0 ;
                   background: #FFFFFF;
                   overflow: hidden;
                   transition:all .2s;
                   transform: translateX(0);
                   
                   span{
                       display: block;
                       transform: translateX(-50%);
                   }
               }
           }
           .btn_t:hover .mask_left{
               transform: translateX(-101%);
           }
           .btn_t:hover .mask_right{
               transform: translateX(101%);
           }
           a{
              color: #eb413d; 
           }
       }
    }
}